import {imagesUrl} from '@/libs/baseUrl'
import {SkeletonProps} from 'ant-design-vue'
import {ParagraphProps} from 'ant-design-vue/lib/typography/Paragraph'
import {SkeletonItemProps} from 'element-plus'
import {computed, defineComponent, PropType} from 'vue'
import {CnBoldP, CnMediumP} from './text'

export const CCard = defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showShadow: {
      type: Boolean,
      default: true
    },
    spinning: Boolean,
    loading: Boolean,
    skeletonProps: {
      type: Object as PropType<SkeletonProps>,
      default: () => ({})
    },
    canHoverMove: {
      type: Boolean,
      default: false
    },
    actived: Boolean,
    onClick: Function as PropType<(e: MouseEvent) => void>,
    vein: Boolean,
    id: String
  },
  setup(props, {slots}) {
    const bodyVeinStyle = computed(() =>
      props.vein
        ? {
            backgroundImage: `url(${imagesUrl('card-vein-block')})`,
            backgroundSize: '245px',
            backgroundPosition: 'right bottom',
            backgroundRepeat: 'no-repeat'
          }
        : {}
    )

    const titleVeinStyle = computed(() =>
      props.vein
        ? {
            backgroundImage: `url(${imagesUrl('card-vein-inline')})`,
            backgroundSize: '100% 100%',
            backgroundPosition: 'right bottom',
            backgroundRepeat: 'no-repeat',
            paddingLeft: '20px',
            paddingRight: '20px'
          }
        : {}
    )

    return () => (
      <div
        id={props.id}
        class={[
          'relative rounded-4  transition-all transform',
          props.canHoverMove && !props.actived ? 'hover:-translate-y-4' : '',
          props.actived ? '-translate-y-4 shadow-cardActived' : '',
          props.showShadow ? 'shadow-card' : ''
        ]}
        style={Object.assign(
          {
            padding: '20px',
            overflow: 'hidden',
            backgroundColor: '#fff',
            width: '100%',
            border: '1px solid #dddedf'
          },
          bodyVeinStyle.value
        )}
        onClick={e => props.onClick && props.onClick(e)}
      >
        <a-spin spinning={props.loading}>
          {/* 卡片标题 */}
          <div
            class={['w-full mb-12', props.showTitle ? '' : 'hidden']}
            title={props.title}
            style={titleVeinStyle.value}
          >
            <CnMediumP class='card-title hanzi text-16 font-bold'>
              {slots.title ? slots.title?.() : props.title}
            </CnMediumP>
          </div>

          <div class='opacity-95'>
            {/* 卡片内容 */}
            {slots.default?.()}
          </div>
        </a-spin>
      </div>
    )
  }
})

/**
 * @desc 上中下结构
 * @desc 上与中之间有分割线
 */
export const CCardCol = defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    splitLine: {
      type: Boolean,
      default: false
    },
    canHoverMove: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    skeletonProps: {
      type: Object as PropType<SkeletonProps>,
      default: () => ({})
    }
  },
  setup(props, {slots}) {
    return () => (
      <div
        class={[
          'overflow-hidden relative shadow-card transition-all duration-300 transform',
          props.canHoverMove ? 'hover:-translate-y-4' : ''
        ]}
        style={{
          padding: '20px 16px 20px 16px'
        }}
      >
        <a-skeleton active loading={props.loading} paragraph={props.skeletonProps.paragraph}>
          {/* 卡片标题 */}
          <div class='card-title' title={props.title}>
            <CnBoldP class='text-16 text-black'>
              {' '}
              {slots.title ? slots.title?.() : props.title}
            </CnBoldP>
          </div>
          <div class='mt-20'>
            {/* 卡片头部 */}
            {slots.header?.()}
          </div>
          {props.splitLine ? <CCardSplintLineRow></CCardSplintLineRow> : null}
          {/* 卡片内容 */}
          {slots.default?.()}
          {slots.footer ? (
            <div class='overflow-hidden'>
              {/* 卡片内容 */}
              {slots.footer?.()}
            </div>
          ) : null}
        </a-skeleton>
      </div>
    )
  }
})

export const CCardSplintLineRow = defineComponent({
  setup(props, ctx) {
    return () => (
      <div
        style={{
          'border-bottom': '1px solid',
          borderColor: '#E5E6EB',
          marginTop: '20px'
        }}
      ></div>
    )
  }
})
